<template>
    <div>
        <el-card>
            <h1 style="font-weight:700;font-size:24px">任务管理</h1>
            <el-divider></el-divider>
            <br>
            <div>
                <el-form ref="form" :model="ssform" label-width="80px" :inline="true">
                    <el-form-item label="网格区域">
                        <el-input v-model="ssform.address" style="width: 180px;"></el-input>
                    </el-form-item>
                    <el-form-item label="任务类别">
                        <el-input v-model="ssform.nandu" style="width: 180px;"></el-input>
                    </el-form-item>
                    <el-form-item label="网格员">
                        <el-input v-model="ssform.fzr" style="width: 180px;"></el-input>
                    </el-form-item>
                </el-form>
                <div style="margin-left: 400px;">
                    <el-button @click="chongzhi()">重置</el-button>
                    <el-button style="background-color: #394E9E;color:white" @click="getdata()">查询</el-button>
                </div>
            </div>
            <br>
            <el-button @click="add" v-show="rid == '65f12041caadbc7190c137b9'">新建任务</el-button>
            <br>
            <el-table v-show="rid != '65f8dd051c78378ca710a242'" ref="multipleTable" :data="list" tooltip-effect="dark"
                style="width: 100%">
                <el-table-column prop="address" label="网格区域" width="180">
                </el-table-column>
                <el-table-column prop="nandu" label="网格任务" width="150">
                </el-table-column>
                <el-table-column prop="num" label="任务数量" width="130">
                </el-table-column>
                <el-table-column label="完成质量" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.zhiliang == '待评估'" style="color:gold">{{ scope.row.zhiliang }}</span>
                        <span v-if="scope.row.zhiliang == '良'" style="color:orange">{{ scope.row.zhiliang }}</span>
                        <span v-if="scope.row.zhiliang == '好'" style="color:green">{{ scope.row.zhiliang }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="任务进度" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.jindu == '未确认'" style="color:red">{{ scope.row.jindu }}</span>
                        <span v-if="scope.row.jindu == '已完成'" style="color:green">{{ scope.row.jindu }}</span>
                        <span v-if="scope.row.jindu == '进行中'" style="color:orange">{{ scope.row.jindu }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="核实状态" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.sta == 0" style="color:gold">未审核</span>
                        <span v-if="scope.row.sta == 1" style="color:green">已审核</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fzr" label="负责人员" width="150">
                </el-table-column>
                <el-table-column prop="cz" label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.jindu == '未确认' & rid != '65f8dd051c78378ca710a242'"
                            style="background-color: #394E9E;color:white"
                            @click="chehui(scope.row._id)">撤回任务</el-button>


                        <el-button v-else-if="scope.row.jindu == '未确认' & rid == '65f8dd051c78378ca710a242'"
                            style="background-color: #394E9E;color:white" @click="jieshou(scope.row)">接收任务</el-button>



                        <el-button v-else-if="scope.row.jindu == '已完成'" style="background-color: #394E9E;color:white" @clikc="shenhe(scope.row)">任务审核</el-button>




                        <el-button @click="xiangqing(scope.row)">详情</el-button>
                        <el-button v-if="scope.row.jindu == '已完成'" @click="shanchu(scope.row._id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>




            <el-table v-show="rid == '65f8dd051c78378ca710a242'" ref="multipleTable" :data="weilist"
                tooltip-effect="dark" style="width: 100%">
                <el-table-column prop="address" label="网格区域" width="180">
                </el-table-column>
                <el-table-column prop="nandu" label="网格任务" width="150">
                </el-table-column>
                <el-table-column prop="num" label="任务数量" width="130">
                </el-table-column>
                <el-table-column label="完成质量" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.zhiliang == '待评估'" style="color:gold">{{ scope.row.zhiliang }}</span>
                        <span v-if="scope.row.zhiliang == '良'" style="color:orange">{{ scope.row.zhiliang }}</span>
                        <span v-if="scope.row.zhiliang == '好'" style="color:green">{{ scope.row.zhiliang }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="任务进度" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.jindu == '未确认'" style="color:red">{{ scope.row.jindu }}</span>
                        <span v-if="scope.row.jindu == '已完成'" style="color:green">{{ scope.row.jindu }}</span>
                        <span v-if="scope.row.jindu == '进行中'" style="color:orange">{{ scope.row.jindu }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="核实状态" width="150">
                    <template scope="scope">
                        <span v-if="scope.row.sta == 0" style="color:gold">未审核</span>
                        <span v-if="scope.row.sta == 1" style="color:green">已审核</span>
                    </template>
                </el-table-column>
                <el-table-column prop="fzr" label="负责人员" width="150">
                </el-table-column>
                <el-table-column prop="cz" label="操作">
                    <template slot-scope="scope">
                        <el-button v-if="scope.row.jindu == '未确认' & rid != '65f8dd051c78378ca710a242'"
                            style="background-color: #394E9E;color:white"
                            @click="chehui(scope.row._id)">撤回任务</el-button>


                        <el-button v-else-if="scope.row.jindu == '未确认' & rid == '65f8dd051c78378ca710a242'"
                            style="background-color: #394E9E;color:white" @click="jieshou(scope.row)">接收任务</el-button>


                        <el-button v-else-if="scope.row.jindu == '进行中'" style="background-color: #394E9E;color:white"
                            @click="shenhe1(scope.row)">任务审核</el-button>

                        <el-button @click="xiangqing(scope.row)">详情</el-button>
                        <el-button v-if="scope.row.jindu == '已完成'"  @click="shanchu(scope.row._id)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </el-card>
        <!-- 任务详情 -->
        <el-dialog :visible.sync="xiangqingsta">
            <el-descriptions title="任务详情">
                <el-descriptions-item label="网格区域">{{ xqlist.address }}</el-descriptions-item>
                <el-descriptions-item label="网格任务">{{ xqlist.nandu }}</el-descriptions-item>
                <el-descriptions-item label="任务数量">{{ xqlist.num }}</el-descriptions-item>
                <el-descriptions-item label="完成质量">
                    <span v-if="xqlist.zhiliang == '待评估'" style="color:gold">{{ xqlist.zhiliang }}</span>
                    <span v-if="xqlist.zhiliang == '良'" style="color:orange">{{ xqlist.zhiliang }}</span>
                    <span v-if="xqlist.zhiliang == '好'" style="color:green">{{ xqlist.zhiliang }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="任务进度">
                    <span v-if="xqlist.jindu == '未确认'" style="color:red">{{ xqlist.jindu }}</span>
                    <span v-if="xqlist.jindu == '已完成'" style="color:green">{{ xqlist.jindu }}</span>
                    <span v-if="xqlist.jindu == '进行中'" style="color:orange">{{ xqlist.jindu }}</span>
                </el-descriptions-item>
                <el-descriptions-item label="核实状态">
                    <span v-if="xqlist.sta == 0" style="color:gold">未审核</span>
                    <span v-if="xqlist.sta == 1" style="color:green">已审核</span>
                </el-descriptions-item>
                <el-descriptions-item label="负责人员">{{ xqlist.fzr }}</el-descriptions-item>
            </el-descriptions>
        </el-dialog>

        <el-dialog title="添加" :visible.sync="dialogFormVisible">
            <el-form :model="addform">
                <el-form-item label="网格区域" :label-width="formLabelWidth">
                    <el-select v-model="addform.address">
                        <el-option label="富力江湾周边" value="富力江湾周边"></el-option>
                        <el-option label="阳光花园周边" value="阳光花园周边"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务类型" :label-width="formLabelWidth">
                    <el-select v-model="addform.nandu">
                        <el-option label="简单任务" value="简单任务"></el-option>
                        <el-option label="一般任务" value="一般任务"></el-option>
                        <el-option label="困难任务" value="困难任务"></el-option>
                        <el-option label="地狱任务" value="地狱任务"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="任务数量" :label-width="formLabelWidth">
                    <el-input-number v-model="addform.num" :min="1" :max="50" label="安排这么多会累死人的"></el-input-number>
                </el-form-item>
                <el-form-item label="负责人员" :label-width="formLabelWidth">
                    <el-select v-model="addform.fzr">
                        <el-option label="请选择" value=""></el-option>
                        <el-option v-for="item in wanggelist" :key="item._id" :label="item.name" :value="item.name">
                        </el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button style="background-color: #394E9E;color:white" @click="tianjia">确 定</el-button>
            </div>
        </el-dialog>


    </div>
</template>

<script>
export default {
    data() {
        return {
            ssform: {
                address: '',
                nandu: '',
                fzr: ''
            },
            dialogFormVisible: false,
            dialogFormVisible1: false,
            list: [],
            weilist: [],
            addform: {
                address: '',
                nandu: '',
                num: '',
                zhiliang: '待评估',
                jindu: '未确认',
                sta: 0,
                fzr: '',
            },
            formLabelWidth: '120px',
            wanggelist: [],
            rid: '',
            xiangqingsta: false,
            xqlist: [],
            bianform: {}
        }
    },
    methods: {
        async getdata() {
            this.rid = JSON.parse(sessionStorage.getItem("list")).roleid
            let { data } = await this.axios.get('/renwulist')
            this.list = data.list
            this.weilist = data.weilist
        },
        async getwanggeyuan() {
            let { data } = await this.axios.get('/userlist')
            this.wanggelist = data.wanggelist
        },
        async jieshou(row) {
            let form = { ...row }
            form.jindu = '进行中'
            console.log(form);
            let { data } = await this.axios.post('/jieshou', form)
            if (data.code == 200) {
                this.$message.success('已接收')
                this.getdata()
            } else {
                this.$message.error('出了点小问题呢')
            }
        },
        async bian() {
            this.bianform.sta = 1
            let { data } = await this.axios.post('/jieshou', this.bianform)
            if (data.code == 200) {
                this.$message.success('审核完成')
                this.getdata()
            } else {
                this.$message.error('出了点小问题呢')
            }
        },
        shenhe(row) {
            console.log(row);
        },
        shenhe1(row) {
            // console.log(row);
            this.$confirm("确定完成任务，等待接受审核?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let bian = row
                bian.jindu = '已完成'
                let { data } = await this.axios.post('/jieshou', bian)
                if (data.code == 201) {
                    this.getdata();
                    this.$message({
                        type: "success",
                        message: "审核成功!",
                    });
                }
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消审核",
                });
            });
        },
        async add() {
            this.dialogFormVisible = true
        },
        shanchu(id) {
            this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let { data } = await this.axios.delete(
                    `http://localhost:3000/chehui/${id}`
                );
                if (data.code == 201) {
                    this.getdata();
                    this.$message({
                        type: "success",
                        message: "删除成功!",
                    });
                }
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消删除",
                });
            });
        },
        async tianjia() {
            let { data } = await this.axios.post('/addrenwu', this.addform)
            console.log(data);
            if (data.code == 200) {
                this.dialogFormVisible = false
                this.$message.success('添加成功')
                this.getdata()
            } else {
                this.$message.error('添加失败')
            }
        },
        chehui(id) {
            this.$confirm("确认撤回吗?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning",
            }).then(async () => {
                let { data } = await this.axios.delete(
                    `http://localhost:3000/chehui/${id}`
                );
                if (data.code == 201) {
                    this.getdata();
                    this.$message({
                        type: "success",
                        message: "撤回成功!",
                    });
                }
            }).catch(() => {
                this.$message({
                    type: "info",
                    message: "已取消撤回",
                });
            });
        },
        xiangqing(row) {
            this.xiangqingsta = true
            this.xqlist = { ...row }
        }
    },
    mounted() {
        this.getdata(),
            this.getwanggeyuan()
    },
}
</script>

<style></style>